<template>
        <div class="father">
                <h3>父组件</h3>
                <div class="content">
                        <Category title="热门游戏排行 ">
                                <ul>
                                        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
                                </ul>
                        </Category>
                        <Category title="美食">
                                <img :src="imgUrl"/>
                        </Category>
                        <Category title="影视推荐">
                                <video :src="videUrl" controls></video>
                        </Category>
                </div>

        </div>
</template>
<script lang="ts" setup>
import Category from './Category.vue';
import { ref, reactive } from 'vue'

let games = reactive([
        { id: 'game1', name: '黑神话：悟空' },
        { id: 'game2', name: '幻兽帕鲁' },
        { id: 'game3', name: 'pubg' }
])

let imgUrl = ref("https://z1.ax1x.com/2023/11/19/piNxLo4.jpg")
let videUrl = ref('http://files.youth.cn/video/zq_video/202408/P020240823489094787252.mp4')
</script>
<style scoped>
.father {
        background: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
}

.content {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
}
img,video{
        width: 100%;
}
</style>